<template>
    <div id="login">
        <el-card class="box-card">
          <div class="logoImg"></div>
            <el-form inline>
                <h1 style="display: inline-block; text-align: left;">登录</h1>
                <el-form-item style="display: inline-block; float:right; padding-top:21px; margin: 0!important; ">
                    <span style="color: black">没有账号？</span>
                    <router-link to="/register" style="text-decoration: none; color: cornflowerblue;margin-left: 5px">去注册</router-link>
                </el-form-item>
                <el-form inline style=" margin-top: 15px;">
                    <el-form-item>
                        <el-input v-model="user.account" style="width: 410px;font-size: 18px"
                                  placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-input v-model="user.password" type="password" style="width: 410px;font-size: 18px"
                                  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                    </el-form-item>
                    <el-form-item style="display: inline-block; float:right; margin: 0!important; ">
                        <span style="color: black">已有账号，</span>
                        <router-link to="/register" style="text-decoration: none; color: cornflowerblue;margin-left: 5px">忘记密码?</router-link>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login" class="log-button" style="width: 410px;margin-left: 0">登录</el-button>
                    </el-form-item>

                </el-form>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "logo",
        data() {
            return {
                checked: false,
                user: {},
            }
        },
        methods: {
            login() {
                this.$axios.post('/api/user/login', this.user)
                    .then((res) => {
                        if (res.data.status === 1) {
                            this.$message.success(res.data.msg);
                            localStorage.setItem('TOKEN', res.data.data.token);
                            if (res.data.data.userType === 1) {
                                this.$router.push('/index')
                            } else if (res.data.data.userType === 0) {
                                this.$router.push('/UserIndex')
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        }
                    })
            },

        }

    }
</script>

<style scoped lang="scss">
    #login {

      .logoImg {
        height: 120px;
        background: url("~@/../src/image/LOGO-2.png") center center no-repeat;
      }

        .log-button {
            width: 150px;
            height: 50px;
            font-size: 20px;
            margin-left: 30px;
        }


        .box-card {
            box-shadow: none;
            border: none;
            /*color: white;*/
            margin: 0 auto;
            width: 450px;
            height: 470px;
        }
    }
</style>